<template>
  <div>
    <pre v-note>
    ajax异步请求时，如果跨域出现复杂跨域请求，请求本身要求先完成服务器测试
        => 服务器测试由 客户端 自动完成 options 请求的发送
        => 该请求需要服务器明确响应允许跨域的方法列表
        => 除get、无参post请求外，其它请求均为复杂请求
      <code>
        // koa 服务器的复杂跨域设置
        app.use(async (ctx,next)=>{
          // 允许跨域地址列表
          ctx.set("Access-Control-Allow-Origin","*")
          //  为复杂请求提供请求方法允许列表
          ctx.set("Access-Control-Allow-Methods","OPTIONS,GET,DELETE,POST,PUT,PATH")
          //  为复杂请求提供特殊请求头允许列表
          ctx.set("Access-Control-Allow-Headers","Content-Type")
          //  分离 OPTIONS 请求处理
          if(ctx.method=="OPTIONS"){
              ctx.body = "";
          }else{
              await next();
          }
        })
      </code>

    axios的基本使用
        1. URL参数携带
            + axios.get(url,config)
            + axios.delete(url,config)
        2. 请求体参数携带
            + axios.post(url,data,config)
            + axios.put(url,data,config)
            + axios.patch(url,data,config)
        3. 综合请求
            axios.request(config)

    关于config的取值参考: <a href="https://www.axios-http.cn/">https://www.axios-http.cn/</a>
    </pre>
    <p>{{ result1 }}</p>
    <input type="button" value="axios.request(config)" @click="sendFun1()" />

    <pre v-note>
    URL参数携带
        + 参数以字符串的方式拼接在请求地址之后
        + URL参数和地址直接以 ? 链接，参数以 key=value 组成，多参数以 ＆ 进行连写
            例如参数: paramsA:1 和 paramsB:[1,2,3]
            链接格式: 地址?paramsA=1＆paramsB=[1,2,3]
      <code>
        async sendFun2() {
          try {
            let response = await axios.get(
              `http://127.0.0.1:3000/test/full?name=${this.query.name}&age=${this.query.age}`
            );
            this.result2 = response.data;
          } catch (error) {
            console.log(error);
          }
        },
        async sendFun3() {
          try {
            let response = await axios.get("http://127.0.0.1:3000/test/full", {
              // axios 会将接收到的对象参数通过方法转换成 url 参数格式
              // params:{
              //     name:this.query.name,
              //     age:this.query.age
              // }
              params: this.query,
            });
            this.result2 = response.data;
          } catch (error) {
            console.log(error);
          }
        },
      </code>

    请求体参数携带
        + 通过异步请求方法提供功能完成请求体参数的定义
      <code>
        async sendFun4() {
          try {
            let response = await axios.post("http://127.0.0.1:3000/test/full",this.body);
            this.result3 = response.data;
          } catch (error) {
            console.log(error);
          }
        },
      </code>
    </pre>

    <p>{{ result2 }}</p>
    <input type="text" v-model="query.name" />
    <input type="text" v-model="query.age" />
    <input
      type="button"
      value="axios.get(url,config)-带参-url拼接"
      @click="sendFun2()"
    />
    <input
      type="button"
      value="axios.get(url,config)-带参-config配置"
      @click="sendFun3()"
    />
    <hr />
    <p>{{ result3 }}</p>
    <input type="text" v-model="body.name" />
    <input type="text" v-model="body.age" />
    <input
      type="button"
      value="axios.post(url,data,config)-带参-data为请求体参数"
      @click="sendFun4()"
    />

    <pre v-note>
    RESFULL 请求和 REST 参数
      + RESFULL请求指的是， 服务器以一个地址通过区分请求类型描述不同的数据操作规则
      + REST参数指定是，将关键值作为请求地址的一部分进行定义，描述分离式的服务端功能
    </pre>
    <p>{{ result4 }}</p>
    <input type="button" value="查询" @click="loadStu()" />
    <input type="button" value="添加" @click="addStu()" />
    <input type="button" value="删除" @click="removeStu()" />
    <input type="button" value="修改" @click="updateStu()" />
    <input type="button" value="根据ID查询学生" @click="loadStuById()" />

  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      result1: {},
      result2: {},
      result3: {},
      result4: {},
      query: {
        name: "tom",
        age: 23,
      },
      body: {
        name: "tom",
        age: 23,
      },
    };
  },
  methods: {
    async sendFun1() {
      try {
        let response = await axios.request({
          url: "http://127.0.0.1:3000/test/full",
          //   method:"get",
          method: "delete",
          //   method:"post",
        });
        this.result1 = response.data;
      } catch (error) {
        // 注释
        console.log(error);
      }
    },
    async sendFun2() {
      try {
        let response = await axios.get(
          `http://127.0.0.1:3000/test/full?name=${this.query.name}&age=${this.query.age}`
        );
        this.result2 = response.data;
      } catch (error) {
        console.log(error);
      }
    },
    async sendFun3() {
      try {
        let response = await axios.get("http://127.0.0.1:3000/test/full", {
          // axios 会将接收到的对象参数通过方法转换成 url 参数格式
          // params:{
          //     name:this.query.name,
          //     age:this.query.age
          // }
          params: this.query,
        });
        this.result2 = response.data;
      } catch (error) {
        console.log(error);
      }
    },
    async sendFun4() {
      try {
        let response = await axios.post(
          "http://127.0.0.1:3000/test/full",
          this.body
        );
        this.result3 = response.data;
      } catch (error) {
        console.log(error);
      }
    },
    async loadStu() {
      try {
        let { data } = await axios.get("http://127.0.0.1:3000/stu");
        this.result4 = data;
      } catch (error) {
        console.log(error);
      }
    },
     async loadStuById() {
      try {
        let id = Math.random();
        let { data } = await axios.get(`http://127.0.0.1:3000/stu/${id}`);
        this.result4 = data;
      } catch (error) {
        console.log(error);
      }
    },
    async addStu() {
      try {
        let { data } = await axios.post("http://127.0.0.1:3000/stu", {
          name: "邹强",
          sex: "女",
          tel: "14243781564",
          img: "https://api.ixiaowai.cn/mcapi/mcapi.php?_=120000200710145049",
        });
        this.result4 = data;
      } catch (error) {
        console.log(error);
      }
    },
    async removeStu() {
      try {
        let { data } = await axios.delete("http://127.0.0.1:3000/stu",{
          params:{
            id:"213123213213123213"
          }
        });
        this.result4 = data;
      } catch (error) {
        console.log(error);
      }
    },
    async updateStu(){
       try {
        let { data } = await axios.patch("http://127.0.0.1:3000/stu", {
          id:"1231231232131",
          name: "邹强",
          sex: "女",
          tel: "14243781564",
          img: "https://api.ixiaowai.cn/mcapi/mcapi.php?_=120000200710145049",
        });
        this.result4 = data;
      } catch (error) {
        console.log(error);
      }
    }
  },
};
</script>
